<?php use app\commands\front\MockWidget; ?>
<?php MockWidget::begin(); ?>
<?php MockWidget::end();
$type = Yii::$app->request->get('type', 1);//听力1 全部 5
$continue = Yii::$app->request->get('continue', 0);//0开始 1继续
$cate_id = Yii::$app->request->get('cate', 1);
?>
<link rel="stylesheet" href="/cn/css/mock/listen.css">

<section class="exerciseBox" id="listenBox">
    <div class="exerciseHead">
        <div class="headCenter">
            <div class="headCenterLeft">
                <img :src="userImage?userImage:'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/20@2x.png'"
                     alt="">
                {{userName}}
            </div>
            <div class="headCenterRight">
                <div class="headTime">
                    <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/22@2x.png" alt="">
                    <p class="not-precise" v-show="timeLayout" v-cloak @mouseover="timeLayout = false">
                        <span class="time">{{minutes == 30?'30':minutes!='0'?Number(minutes)+1:'0'}}</span>
                        <span class="minutes">minutes</span>
                        left
                    </p>
                    <p class="precise" v-show="!timeLayout" v-cloak @mouseleave="timeLayout = true">
                        <span class="minute">{{minutes<10?'0'+minutes:minutes}}</span>
                        : <span class="second">{{seconds<10?'0'+seconds:seconds}}</span>
                        left
                    </p>
                </div>
                <div class="volumeBox">
                    <img :src="volume == 0?'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/23@2x.png':'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/21@2x.png'"
                         alt="">
                    <el-slider style="width: 164px" v-model="volume"></el-slider>
                </div>
                <div class="buttonBox">
                    <a href="javascript:;" class="FinishBtn" v-if="type == 5" @click="finishSec">Finish Section</a>
                    <a href="javascript:;" class="FinishBtn" v-if="type != 5" @click="finishSec">Finish Test</a>
                    <a href="javascript:;" class="PauseBtn" @click="pause">Pause</a>
                    <a href="javascript:;" class="HelpBtn" @click="help">Help</a>
                    <a href="javascript:;" class="HideBtn" @click="hide">Hide</a>
                </div>
            </div>
        </div>
    </div>
    <div class="exerciseCenter" id="exerciseCenter">
        <!--第一步-->
        <div class="steps step1" v-show="steps == 1">
            <p class="stepTitle">
                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/24@2x.png" alt="">
                Confirm your details
            </p>
            <div class="stepContent">
                <p class="bc-title">EXAMPLE</p>
                <div class="bc-intro">
                    <p>・ Name:</p>
                    <p>・ Date of birth: XX-Xx-XXXX</p>
                    <p>・ Candidate number:<input type="text"> 填入123456即可</p>
                </div>
                <p class="stepTitle" style="width: 93%">
                    <img style="width: 15px;" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/25@2x.png"
                         alt="">
                    If your details aren′t correct, please inform the invigilator.
                </p>
                <a href="javascript:;" class="confirmMessage" @click="steps = 2">My details are correct</a>
            </div>
            <div class="stepTip" v-if="showTip">
                <img @click="showTip = false" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/26@2x.png"
                     alt="">
                <p>Please click the "my details are correct" button to progress intothe listening familiarisation test,
                    inyour real IELTS testthere will be an invigilator in the roomto advise when to dothis.</p>
            </div>
        </div>
        <!--第二步-->
        <div class="steps step2" v-show="steps == 2">
            <p class="stepTitle">
                <img src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/27@2x.png" alt="">
                Test sound
            </p>
            <div class="stepContent">
                <audio ref="testAudio" style="display: none" loop src="/cn/css/public/soundcheck.mp3"
                       preload="metadata"></audio>
                <p class="test-title">Put on your headphones and click the Play sound button to play a sample sound.</p>
                <a href="javascript:;" class="playSound" @click="playTest">Play sound</a>
                <p class="stepTitle" style="width: 93%">
                    <img style="width: 15px;" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/25@2x.png"
                         alt="">
                    If your details aren′t correct, please inform the invigilator.
                </p>
                <a href="javascript:;" class="ContinueMessage" @click="continueStep">Continue</a>
            </div>
            <p class="steps2Tips">提示：实际考试中，听力模考需进行设备调试与确认，没有问题后方能进入考试。</p>
        </div>
        <!--第三步-->
        <div class="steps step3" v-show="steps == 3">
            <div class="row">
                <div class="col">
                    <h5>IELTS Listening</h5>
                    <p>Time: Approximately 30 minutes</p>
                    <h5>INSTRUCTIONS TO CANDIDATES</h5>
                    <ul>
                        <li>· Answer <strong>all</strong> the questions.</li>
                        <li>· You can change your answers at any time during the test.</li>
                    </ul>
                    <h5>INFORMATION FOR CANDIDATES</h5>
                    <ul>
                        <li>· There are 40 questions in this test.</li>
                        <li>· Each question carries one mark.</li>
                        <li>· There are four parts to the test</li>
                        <li>· You will hear each part once.</li>
                        <li>· For each part of the test there will be time for you to look through the questions and
                            time for
                            you
                            to check your answers.
                        </li>
                    </ul>
                </div>
            </div>
            <p class="warnTips">Do not click 'Start test' until you are told to do so</p>
            <a href="javascript:;" class="StartTest" @click="startTest">Start test</a>
            <div class="stepTip" v-if="showTip" style="bottom: -100px">
                <img @click="showTip = false" src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/26@2x.png"
                     alt="">
                <p>Please click the “Start test” button to start the familiarisation test, in your real IELTS test there
                    will be an invigilator in the room to advise when to do this.</p>
            </div>
        </div>
        <!--第四步 做题-->
        <div class="steps step4" id="stepExercise" style="margin: 0 auto" v-show="steps == 4">
            <audio ref="mockAudio" style="display: none" :src="mockAudioArry[0]" preload="metadata" controls></audio>
            <div class="quesBox" v-for="(itemBox,indexBox) in dataQuestion.data">
                <div class="partTitle" v-show="currentPart == indexBox ">
                    <p>Part {{indexBox + 1}} </p>
                    <span>Listen and answer questions {{10 * indexBox + 1}} - {{10 * indexBox + dataQuestion.question_list[indexBox].length}}.</span>
                </div>
                <div class="quesContent" v-show="currentPart == indexBox ">
                    <div class="outDiv" v-for="(item,index) in itemBox.topic" :id="item.parent.type">
                        <!--单选题  type 2-->
                        <div class="" v-if="item.parent.type == 2">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.description"></div>
                            <div class="containerBox">
                                <div class="singleBox ItemIn" v-for="(itemSon,indexSon) in item.son"
                                     :id="'listen_'+ itemSon.content_id">
                                    <div class="singleTitle">
                                        <div v-html="itemSon.description"></div>
                                        <img class="spin"
                                             src="https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/28@2x.png"
                                             alt=""
                                             @click="toggle($event)">
                                    </div>
                                    <div class="singleZt">
                                        <div class="singleCover" v-for="(itemSonDes,indexSonDes) in itemSon.answer">
                                            <input :id="itemSon.id+'_'+indexSonDes" type="radio" class="radioBox"
                                                   @change="getAnswer(index,itemSon.id,indexSon)"
                                                   v-model="AnswerArry[indexBox][index][indexSon].answer"
                                                   :value="letterArry[indexSonDes]"
                                                   @click="getDoNow(itemSon.content_id)">
                                            <label :for="itemSon.id+'_'+indexSonDes">
                                                <b></b>
                                                {{letterArry[indexSonDes]}}.
                                                <p v-html="itemSonDes"></p>

                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--多选题  type 3-->
                        <div class="" v-if="item.parent.type == 3">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div class="quesArticle" v-html="item.parent.description"></div>
                            <div class="singleBox1 ItemIn" v-for="(itemSon,indexSon) in item.son"
                                 :id="'listen_'+ itemSon.content_id">
                                <div class="singleTitle">
                                    <div v-html="itemSon.description"></div>
                                    <img class="spin" src="/cn/images/exerciseNew/13@2x.png" alt=""
                                         @click="toggle($event)">
                                </div>
                                <div class="singleZt">
                                    <div class="singleCover" v-for="(itemSonDes,indexSonDes) in itemSon.answer">
                                        <input :id="itemSon.id+'_'+indexSonDes" type="checkbox" class="radioBox"
                                               @change="getAnswer(index,itemSon.id,indexSon,item.parent.answerCount)"
                                               v-model="AnswerArry[indexBox][index][indexSon].answer"
                                               :value="letterArry[indexSonDes]" @click="getDoNow(itemSon.content_id)">
                                        <label :for="itemSon.id+'_'+indexSonDes">
                                            <b style="margin-right: 5px;"></b>
                                            {{letterArry[indexSonDes]}}.<span v-html="itemSonDes"></span></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--填空  type 除开2和3 全部算填空  首先是正常的表格填空-->
                        <div class="" v-if="item.parent.type == 1">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div class="quesArticle tableCover" v-html="item.parent.description"></div>
                        </div>
                        <!--填空  type 除开2和3 全部算填空  图片图形填空题-->
                        <div class="" v-if="item.parent.type == 5">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div class="quesArticle" v-for="(itemSon,indexSon) in item.parent.description">
                                <div v-html="itemSon"></div>
                            </div>
                        </div>
                        <!--填空  type 除开2和3 全部算填空  配对填空题-->
                        <div class="" v-if="item.parent.type == 4">
                            <div class="quesTitle">{{item.parent.title}}</div>
                            <div class="quesCnName" v-html="item.parent.cnName"></div>
                            <div>
                                <div class="artiOption" v-for="(itemSon,indexSon) in item.parent.description">
                                    <div v-html="itemSon"></div>
                                </div>
                                <div class="artiOption" v-for="(itemSentence,indexSentence) in item.son[0].answer">
                                    <div>{{itemSentence}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部按钮 -->
            <div class="footNav">
                <div class="footNavCover">
                    <a href="javascript:void(0)" class="reviewBtn" @click="reviewStatus">REVIEW</a>
                    <div class="quesNumCover" id="quesNumCover">
                        <!-- quesNum 未做  fulfil已做  doNow 正在做 notSure 不确定review-->
                        <div class="zoning" v-for="(itemF,indexF) in dataQuestion.question_list">
                            <p>Part {{indexF + 1}}：</p>
                            <a href="javascript:void(0)"
                               :class="{'quesNum':index>-1, 'fulfil': item.isDo == 1, 'notSure': item.status == 1, 'doNow': (10 *
                                indexF + index + 1) == current }"
                               v-for="(item,index) in itemF"
                               @click="welter(item.pid,item.content_id,(10 * indexF + index + 1),item.status,indexF)">{{10
                                *
                                indexF + index + 1}}
                            </a>
                        </div>
                    </div>
                    <div class="turnBtn">
                        <a href="javascript:void(0)" class="prevBtn" @click="prev()">
                            <img :src="current>1?'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/31@2x.png':'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/34@2x.png'"
                                 alt="">
                        </a>
                        <a href="javascript:void(0)" class="nextBtn" @click="next()">
                            <img :src="current<totoleQues?'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/35@2x.png':'https://file.viplgw.cn/ui/thinku-ielts-new/images/mock/32@2x.png'"
                                 alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    window.listenTest = new Vue({
        el: '#listenBox',
        data() {
            return {
                userImage: '',
                userName: '',
                minutes: 30,
                seconds: 0,
                timeLayout: true,
                volume: 75,
                steps: 1,
                showTip: true,
                testAudio: null,//试音音频对象
                timeInter: null,
                isStart: false,

                type: '<?php echo $type?>',//听力单项1  全科里面的听力 5
                cate: '<?php echo $cate_id?>',//

                mockAudioArry: [],//模考音频数组
                mockAudioNum: 0,//音频数组当前播放的第几个音频
                mockAudio: null,//模考音频对象
                letterArry: [], //序号  26个字母
                dataQuestion: {},//渲染数据
                resultid: '',//渲染数据
                content_id: '',//当前整套题目content_id
                content_btn: '',//当前小题content_id 默认第一题的
                content_btn_status: '',//当前小题目 方形 圆形
                content_pid: '',//当前题目pid 默认第一题的
                totoleQues: 0,//总题目个数
                currentPart: 0,//当前显示的part
                current: 1,//当前正在看的题目序号
                AnswerArry: [],//答题数据
            }
        },
        watch: {
            volume(val) {
                this.mockAudio.volume = val * 0.01
            },
            currentPart(val) {

            },
        },
        created() {
            let that = this;
            this.getData()
            for (let i = 65; i < 91; i++) {
                that.letterArry.push(String.fromCharCode(i));
            }
        },
        mounted() {
            this.testAudio = this.$refs.testAudio;
            this.mockAudio = this.$refs.mockAudio;
            this.addListen();
            initContextMenu('#stepExercise')
        },
        methods: {
            //音频事件监听
            addListen() {
                let that = this;
                that.mockAudio.addEventListener("canplay", function () {

                });
                that.mockAudio.addEventListener("play", function () {

                });
                that.mockAudio.addEventListener("playing", function (event) {

                });
                that.mockAudio.addEventListener("pause", function () {

                });
                that.mockAudio.addEventListener("ended", function () {
                    if (that.mockAudioNum < 3) {
                        that.mockAudioNum++
                        that.$refs.mockAudio.src = that.mockAudioArry[that.mockAudioNum]
                        that.mockAudio.play()
                    }
                });
                that.mockAudio.addEventListener("timeupdate", function (event) {

                });
            },
            getData() {
                let that = this;
                $.get('/cn/mock/listen-data', {
                    type: that.type,
                    cate: that.cate,
                }, function (res) {
                    if (res.code == 1) {
                        that.initData(res.data);
                        res.data.question_list.map((item, index) => {
                            that.totoleQues += item.length;
                        })
                        that.content_pid = res.data.question_list[0][0].pid;
                        that.content_btn = res.data.question_list[0][0].content_id;
                        that.resultid = res.data.resultid;
                        that.userImage = res.data.user.image;
                        that.userName = res.data.user.userName;
                    } else {
                        alert(res.message)
                    }
                }, 'json')
            },
            initData(data) {
                let that = this;
                that.dataQuestion = data;
                that.dataQuestion.data.map((item, itemIndex) => {
                    let arry = [];
                    that.AnswerArry.push(arry);
                    that.mockAudioArry.push(item.listeningFile[0])
                    item.topic.map((train, index) => {
                            let arryson = []
                            that.AnswerArry[itemIndex].push(arryson);
                            if (train.parent.type == 2) { //单选题
                                train.son.map((trainSon, indexSon) => {
                                    let obj = {};
                                    obj.content_id = trainSon.content_id;
                                    obj.answer = '';
                                    obj.trueAnswer = trainSon.alternatives;
                                    obj.createTime = '';
                                    that.AnswerArry[itemIndex][index].push(obj);
                                });
                            } else if (train.parent.type == 3) { //多选题
                                train.son.map((trainSon, indexSon) => {
                                    let obj = {};
                                    obj.content_id = trainSon.content_id;
                                    obj.answer = [];
                                    obj.trueAnswer = trainSon.alternatives;
                                    obj.createTime = '';
                                    obj.answerCount = train.parent.answerCount;
                                    that.AnswerArry[itemIndex][index].push(obj);
                                });
                            } else if (train.parent.type == 1 || train.parent.type == 5 || train.parent.type == 4) { //除开单选多选 都按填空处理
                                train.parent.description = train.parent.description.replace(/#&/g, '#&*');
                                train.parent.description = train.parent.description.split('*');

                                let last = train.parent.description[train.parent.description.length - 1];
                                train.parent.description = train.parent.description.slice(0, train.parent.description.length - 1);

                                if (train.parent.type == 1) { //表格填空
                                    for (var i in train.parent.description) {
                                        train.parent.description[i] = train.parent.description[i].replace(/#&/g,
                                            "<input type='text'  placeholder='" + train.son[i].qNum + "' data-part='" + itemIndex + "' data-topicNum='" + index + "' data-sonNum='" + i + "' data-content-id='" + train.son[i].content_id + "'  class='BlankInput BlankInput1' oninput='window.listenTest.blackBlur(this)' onclick='window.listenTest.getDoNow(" + train.son[i].content_id + ")' id='listen_" + train.son[i].content_id + "'>");
                                    }
                                    let str = '';
                                    for (var i in train.parent.description) {
                                        str += train.parent.description[i];
                                    }
                                    train.parent.description = str + last;
                                    train.son.map((trainSon, indexSon) => {
                                        let obj = {};
                                        obj.content_id = trainSon.content_id;
                                        obj.answer = '';
                                        obj.trueAnswer = trainSon.alternatives;
                                        obj.createTime = '';
                                        that.AnswerArry[itemIndex][index].push(obj);
                                    });
                                } else if (train.parent.type == 5) { //图片填空
                                    train.parent.image = 'https://ielts.thinkwithu.com' + train.parent.image;
                                    for (var i in train.parent.description) {
                                        train.parent.description[i] = train.parent.description[i].replace(/#&/g, "" +
                                            "<input type='text'  placeholder='" + train.son[i].qNum + "' class='BlankInput' data-part='" + itemIndex + "' data-topicNum='" + index + "' data-content-id='" + train.son[i].content_id + "' data-sonNum='" + i + "' id='listen_" + train.son[i].content_id + "' onclick='window.listenTest.getDoNow(" + train.son[i].content_id + ")'  oninput='window.listenTest.blackBlur(this)'>");
                                    }
                                    train.son.map((trainSon, indexSon) => {
                                        let obj = {};
                                        obj.content_id = trainSon.content_id;
                                        obj.answer = '';
                                        obj.trueAnswer = trainSon.alternatives;
                                        obj.createTime = '';
                                        that.AnswerArry[itemIndex][index].push(obj);
                                    });
                                } else if (train.parent.type == 4 && train.parent.questionType != 2) { //配对填空题  算一题情况

                                    for (var i in train.parent.description) {
                                        train.parent.description[i] = train.parent.description[i].replace(/#&/g, "" +
                                            "<input type='text'  placeholder='' class='BlankInput pairInput' data-part='" + itemIndex + "' data-topicNum='" + index + "' data-content-id='" + train.son[0].content_id + "' data-sonNum='" + i + "' id='listen_" + train.son[0].content_id + "' onclick='window.listenTest.getDoNow(" + train.son[0].content_id + ")'  oninput='window.listenTest.blackMatch(this)'>");
                                    }
                                    train.son.map((trainSon, indexSon) => {
                                        let obj = {};
                                        obj.content_id = trainSon.content_id;
                                        obj.answer = '';
                                        obj.trueAnswer = trainSon.alternatives;
                                        obj.createTime = '';
                                        that.AnswerArry[itemIndex][index].push(obj);
                                    });
                                } else if (train.parent.type == 4 && train.parent.questionType == 2) { //配对填空题  算多道题题情况
                                    for (var i in train.parent.description) {
                                        train.parent.description[i] = train.parent.description[i].replace(/#&/g, "" +
                                            "<input type='text'  placeholder='' class='BlankInput pairInput' data-part='" + itemIndex + "' data-topicNum='" + index + "' data-content-id='" + train.son[i].content_id + "' data-sonNum='" + i + "' id='listen_" + train.son[i].content_id + "' onclick='window.listenTest.getDoNow(" + train.son[i].content_id + ")'  oninput='window.listenTest.blackMatchMore(this)'>");
                                    }
                                    train.son.map((trainSon, indexSon) => {
                                        let obj = {};
                                        obj.content_id = trainSon.content_id;
                                        obj.answer = '';
                                        obj.trueAnswer = trainSon.alternatives;
                                        obj.createTime = '';
                                        that.AnswerArry[itemIndex][index].push(obj);
                                    });
                                }
                            }
                        }
                    )
                })
                console.log(that.AnswerArry)
            },
            //review 题目
            reviewStatus() {
                let that = this;
                that.dataQuestion.question_list.map(itemList => {
                    itemList.map(item => {
                        if (item.content_id == that.content_btn) {
                            that.content_btn_status == 0 ? item.status = 1 : item.status = 0;
                        }
                    })
                })
            },
            //展开折叠
            toggle(e) {
                if ($(e.target).hasClass('spinOut')) {
                    $(e.target).removeClass('spinOut');
                } else {
                    $(e.target).addClass('spinOut');
                }
                $(e.target).parents('.ItemIn').find('.singleZt').slideToggle();
            },
            //上一题
            prev() {
                let that = this;
                if (that.current > 1) {
                    that.current = that.current - 1;
                    that.dataQuestion.question_list.map((itemList, indexList) => {
                        itemList.map((item, index) => {
                            if ((10 * indexList + index) == that.current) {
                                that.currentPart = indexList;
                                that.content_btn = item.content_id;
                                document.getElementById('listen_' + that.content_btn) ? document.getElementById('listen_' + that.content_btn).scrollIntoView({
                                    block: "center",
                                    behavior: "smooth"
                                }) : ''
                            }
                        })
                    })
                }
            },
            //下一题
            next() {
                let that = this;
                if (that.current < that.totoleQues) {
                    that.current = parseInt(that.current) + 1;
                    that.dataQuestion.question_list.map((itemList, indexList) => {
                        itemList.map((item, index) => {
                            if ((10 * indexList + index + 1) == that.current) {
                                that.currentPart = indexList;
                                that.content_btn = item.content_id;
                                document.getElementById('listen_' + that.content_btn) ? document.getElementById('listen_' + that.content_btn).scrollIntoView({
                                    block: "center",
                                    behavior: "smooth"
                                }) : ''
                            }
                        })
                    })
                }
            },
            //按钮点击滚动
            welter(pid, content_id, index, status, part) {
                this.currentPart = part;//当前正在看的篇幅
                this.current = index;//当前正在看的题目
                this.content_btn_status = status;//当前正在看的题目的状态  0方形 1 圆形
                this.content_btn = content_id;
                this.content_pid = pid;
                document.getElementById('listen_' + content_id) ? document.getElementById('listen_' + content_id).scrollIntoView({
                    block: "center",
                    behavior: "smooth"
                }) : ''
            },
            //当前
            getDoNow(content_id) {
                let that = this;
                that.dataQuestion.question_list.map((itemList, indexList) => {
                    itemList.map((item, index) => {
                        if (item.content_id == content_id) {
                            that.current = 10 * indexList + index + 1;
                            that.content_btn = content_id;
                        }
                    })
                })
            },
            //配对填空题  只算一题情况  模考里面展示按照多个题形式来展示
            blackMatch(obj) {
                let that = this;
                let str = '';
                $('.pairInput').each(function () {
                    if ($(this).val().replace(/\s*/g, "") == '') {
                        str += '*';
                    } else {
                        str += $(this).val();
                    }
                });
                let part = $(obj).attr('data-part');
                let site = $(obj).attr('data-topicNum');
                that.AnswerArry[part][site][0].answer = str;
                that.getAnswer();
            },
            //配对填空题  多题情况
            blackMatchMore(obj) {
                let that = this;
                let str = '';
                if ($(obj).val().replace(/\s*/g, "") == '') {
                    str = '*';
                } else {
                    str = $(obj).val();
                }
                let part = $(obj).attr('data-part');
                let site = $(obj).attr('data-topicNum');
                let siteDetail = $(obj).attr('data-sonNum');
                that.AnswerArry[part][site][siteDetail].answer = str;
                that.getAnswer();
            },
            //图片填空题
            blackBlur(obj) {
                let that = this;
                let part = $(obj).attr('data-part');
                let site = $(obj).attr('data-topicNum');
                let queIndex = $(obj).attr('data-sonNum');
                that.AnswerArry[part][site][queIndex].answer = $(obj).val();
                that.getAnswer();
            },
            //监听双向绑定的数据的变化 判断是否做了 多选判断length 单选填空判断去除空格为空
            getAnswer(site, id, index, answerCount) {
                let that = this;
                this.AnswerArry.map(itemPart => {
                    itemPart.map(item => {
                        item.map(itemSon => {
                            that.dataQuestion.question_list.map((list, index) => {
                                list.map(listItem => {
                                    if (typeof itemSon.answer == 'string') {
                                        if (listItem.content_id == itemSon.content_id && itemSon.answer.replace(/\s*/g, '') != '') {
                                            itemSon.createTime = Date.parse(new Date()).toString().substr(0, 10);
                                            listItem.isDo = 1;
                                        } else if (listItem.content_id == itemSon.content_id && itemSon.answer.replace(/\s*/g, '') == '') {
                                            listItem.isDo = 0;
                                        }
                                    } else {
                                        if (listItem.content_id == itemSon.content_id && itemSon.answer.length != 0) {
                                            itemSon.createTime = Date.parse(new Date()).toString().substr(0, 10);
                                            listItem.isDo = 1;
                                            if (itemSon.answerCount && (itemSon.answer.length > itemSon.answerCount)) {
                                                itemSon.answer = itemSon.answer.splice(itemSon.answer.length - answerCount, itemSon.answer.length)
                                            }
                                            itemSon.answer = itemSon.answer.sort()
                                        } else if (listItem.content_id == itemSon.content_id && itemSon.answer.length == 0) {
                                            listItem.isDo = 0;
                                        }
                                    }
                                })

                            })
                        })
                    })
                });
                console.log(that.AnswerArry);
            },
            submitText() {
                let that = this;
                this.AnswerArry.map(itemList => {
                    itemList.map(item => {
                        item.map(itemSon => {
                            if (typeof itemSon.answer != 'string') {
                                const reg = new RegExp(',', 'g')
                                itemSon.answer = itemSon.answer.sort().toString().replace(reg, '');
                            }
                        })
                    })
                });
                $.post('/cn/mock/save-answer', {
                    resultid: that.resultid,
                    typeid: 1,
                    content: JSON.stringify(that.AnswerArry),
                }, function (res) {
                    if (res.code == 1) {
                        $('.tipsCover').show()
                        $('.tipsCommon').hide()
                        $('.tipsEnd').show()
                    } else {
                        alert(res.message)
                    }
                }, 'json')
            },
            //提交完成进入下阶段
            nextSection() {
                if (this.type != 5) {//去结果页面
                    window.location.href = '/mock/result.html?type=' + this.type + '&cate=' + this.cate
                } else { //去阅读
                    window.location.href = '/mock/read.html?type=' + 5 + '&cate=' + this.cate + '&continue=1'
                }
            },
            startTest() {
                this.steps = 4
                this.isStart = true
                this.seconds = 59
                this.minutes = 29
                this.timeDown()
            },
            timeDown() {
                let that = this
                this.mockAudio.play()
                this.timeInter = setInterval(function () {
                    that.seconds--
                    if (that.seconds == 0 && that.minutes > 0) {
                        that.minutes--
                        that.seconds = 59
                    } else if (that.minutes == 0 && that.seconds == 0) {
                        clearInterval(that.timeInter)
                        alert('TIME OUT！将自动交卷')
                        that.submitText()
                    }
                }, 1000)
            },
            playTest() {
                this.testAudio.play();
            },
            continueStep() {
                this.testAudio.pause();
                this.steps = 3
            },
            finishSec() {
                $('.tipsCover').show()
                $('.tipsCommon').hide()
                if (this.type != 5) {
                    $('.tipsSection').show()
                } else {
                    $('.tipsTest').show()
                }

            },
            pause() {
                this.mockAudio.pause()
                clearInterval(this.timeInter)
                $('.tipsCover').show()
                $('.tipsCommon').hide()
                $('.tipsPause').show()
            },
            help() {
                $('.tipsCover').show()
                $('.tipsCommon').hide()
                $('.tipsHelp').show()
            },
            hide() {
                $('.tipsCover').hide()
                $('.hiddenCover').show()
            }
        },
    });
</script>
